<script setup>

import {Goods} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {addOrder} from "@/api/order.js";
import {listDrinks} from "@/api/drinks.js";
import {useUserInfoStore} from "@/stores/userInfo.js";
import {userInfo} from "@/api/user.js";
//分页
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(7)//每页条数

//数据表展示
const drinksListData = ref([])

//获取当前用户信息
const userInfoStore = useUserInfoStore();
const getUserInfo = () => {
  return userInfo().then(res => {
    userInfoStore.setUserInfo(res.data);
  });
};
getUserInfo()

//根据id搜索
const id = ref('')


//数据模型
const formData = ref({
  drink: '',
  price: '',
  user: '',
})


//获取商品表
const getDrinksList = () => {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    id: id.value
  }
  listDrinks(params).then(res => {
    drinksListData.value = res.data.records
    total.value = res.data.total
    console.log(res)
  })
}
getDrinksList()


//重置搜索框
const resetParams = () => {
  id.value = ''
  getDrinksList()
}


// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
  pageSize.value = val
  getDrinksList()
}


// 当前页面发生变化，会调用
const handleCurrentChange = (val) => {
  pageNum.value = val
  getDrinksList()
}

// 添加
const addOrders = (drink,price) => {
      formData.value.drink=drink;
      formData.value.price=price;
      formData.value.user=userInfoStore.userInfo.id;
      addOrder(formData.value).then(res => {
        if (res.status) {
          getDrinksList()
          ElMessage.success("购买成功")
          dialogFormVisible.value = false
        }
      })
};

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>购买饮品</span>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="饮品编号：">
        <el-input v-model="id" placeholder="请输入饮品编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDrinksList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="drinksListData" style="width: 100%">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="饮品" prop="name"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="购买" width="100">
        <template #default="{ row }">
          <el-button :icon="Goods" circle plain type="primary" @click="addOrders(row.name,row.price)"></el-button>
          </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

    <!--分页条-->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>


</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>